<template>
	<scroll-view class="page-follow-up" :scroll-y="true" :scroll-with-animation="true" @scrolltolower="scrolltolower">
		<view class="section-list" v-if="dataList?.length">
			<view class="list-content">
				<view class="list-item" @click="toDetail(item)" v-for="item in dataList">
					<image class="list-img" :src="item.coverpic" />
					<view class="list-name text-ellipsis">{{ item.title }}</view>
					<view class="list-disc">
						<template>
							<view class="l-1">{{ item.isfinish ? '完结' : '连载' }}</view>
							<view class="l-2"></view>
							<view class="l-3">共{{ item.allchapter }}话</view>
						</template>
						<!-- <template>
								<view>连载</view>
								<view></view>
								<view>已更7话</view>
							</template> -->
					</view>
				</view>
			</view>
		</view>
		<view v-if="!dataList?.length" class="empty-box">
			<image class="follow-empty-img" :src="`${imgBaseUrl}followup-empty-icon.webp`" />
			<view class="empty-text">前往书城选择喜欢的漫画，加入追更吧</view>
		</view>
	</scroll-view>
</template>

<script setup lang="ts">
import { getBookrack, getHistoryChaps } from '@/api'
import { ref } from 'vue'
const page = ref(1)
const pageSize = ref(20)
const dataList = ref<API.BookItem[]>([])

uni.setNavigationBarTitle({ title: '我的追更' });

const getList = async () => {
	uni.showLoading({ title: ' ', icon: 'none' });
	const { data } = await getBookrack(page.value, pageSize.value);
	dataList.value = dataList.value.concat(data.data)
	uni.hideLoading();
}

const toDetail = async (item: API.BookItem) => {
	// uni.navigateTo({ url: `/pages/book-detail/index?&id=${item.id}` });
	const { data } = await getHistoryChaps(item.id)
	uni.navigateTo({ url: `/pages/readingPage/index?&id=${item?.id}&chapter=${data.history_chapter}` });
}
const scrolltolower = () => {
	page.value++;
	getList();
}
getList()
</script>

<style lang="less" scoped>
.page-follow-up {
	height: 100vh;
	width: 100vw;
	box-sizing: border-box;
	padding-bottom: 40rpx;
	background-color: #ffffff;

	.section-list {
		padding: 0 24rpx 0;

		.list-content {
			display: flex;
			flex-flow: row wrap;
			justify-content: flex-start;
			align-items: center;
			margin-top: 8rpx;

			.list-item {
				margin-top: 28rpx;
				margin-right: 18rpx;

				&:nth-child(3n) {
					margin-right: 0;
				}

				.list-img {
					width: 222rpx;
					height: 296rpx;
					border-radius: 16rpx;
				}

				.list-name {
					width: 222rpx;
					margin-top: 10rpx;
					font-size: 28rpx;
					color: #222222;
				}

				.list-disc {
					display: flex;
					width: 100%;
					margin-top: 4rpx;
					font-size: 24rpx;
					color: #8B8B8B;
					justify-content: flex-start;
					align-items: center;

					.l-2 {
						width: 2rpx;
						height: 16rpx;
						background-color: #DFDFDF;
						margin: 0 12rpx;
					}
				}
			}
		}

	}

	.empty-box {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
	}

	.follow-empty-img {
		width: 468rpx;
		height: 360rpx;
		margin: 368rpx auto 40rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #595E6C;
		text-align: center;
	}
}
</style>